﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>长安汽车</title>
    <link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
    <form id="myForm">
        <div class="ipt-group">
            <label>您的姓名：</label>
            <input id="Name" type="text" placeholder="请输入姓名">
        </div>
        <div class="ipt-group">
            <label>您的称谓：</label>
            <input type="radio" id="man" name="gender" checked="checked" value="男">
            <label for="man">先生</label>
            <input type="radio" id="women" name="gender" value="女">
            <label for="women" style="color: rgb(255,75,105)">女士</label>
        </div>
        <div class="ipt-group">
            <label>联系方式：</label>
            <input id="Phone" type="tel" maxlength="11" placeholder="请输入联系方式">
        </div>
        <div class="ipt-group">
            <label>意向车型：</label>
            @*<input id="CarModel" type="tel" maxlength="11" placeholder="请输入意向车型">*@
            <select id="CarModel">
                <option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;------请选择车型------</option>
            </select>
        </div>

        <div class="ipt-group">
            <label>所在地区：</label>
            <select id="Province">
                @*<option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;---省---</option>*@
                <option value="1000000022" selected="selected">重庆市</option>
            </select>
            <select id="City">
                <option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;---市---</option>
            </select>
            @*<br />*@
        </div>
        <div class="ipt-group">
            <label style="visibility:hidden;">所在地区：</label>
            <select id="Town">
                <option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;---区---</option>
            </select>
        </div>
        <div class="ipt-group ipt-combo">
            <label>经销商：</label>
            <select id="Dealer">
                <option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;------请选择经销商------</option>
            </select>
        </div>

        <button id="SubBtn" class="k-btn get-btn" type="button">
            提交报名
        </button>
    </form>

    <div id="toast" style="display: none;">
        <div class="k-mask"></div>
        <div class="k-toast k-toast-auto">
            <p class="k-toast-info">操作成功</p>
        </div>
    </div>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    @*<script src="~/Scripts/zepto.min.js"></script>*@
    <script type="text/javascript">


        var query = location.search.substring(1); // Get query string
        var aid = query.split("=")[1]; // Break at ampersand

        // Zepto(function ($) {
        $(function () {

            $.get('/Default/GetMaterial?aid=' + aid, {}, function (res) {

                $.each(res, function (i, item) {

                    $('#CarModel').append("<option value='" + item.groupId + "'>" + item.groupName + "</option>");
                });
            });

            //$.get('/Default/GetProvince', {}, function (res) {

            //    $.each(res, function (i, item) {

            //        $('#Province').append("<option value='" + item.id + "'>" + item.text + "</option>");
            //    });
            //});

            //$('#Province').change(function () {

            $.get('/Default/GetCityByProvince?id=' + $('#Province').val() + '&aid=' + aid, {}, function (res) {
                $('#City').html('');
                $('#City').append('<option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;---市---</option>');

                $.each(res, function (i, item) {

                    $('#City').append("<option value='" + item.id + "'>" + item.text + "</option>");
                });
            });
            //});

            $('#City').change(function () {

                $.get('/Default/GetTownByCity?id=' + $('#City').val() + '&aid=' + aid, {}, function (res) {
                    $('#Town').html('');
                    $('#Town').append('<option value="-1" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;---区---</option>');
                    $.each(res, function (i, item) {

                        $('#Town').append("<option value='" + item.id + "'>" + item.text + "</option>");
                    });
                });
            });

            $('#Town,#City').change(function () {

                $.get('/Default/GetDealer?aid=' + aid + '&groupId=' + $('#CarModel').val()
                    + '&provinceId=' + $('#Province').val()
                    + '&cityId=' + $('#City').val()
                    + '&town=' + $('#Town').val(), {}, function (res) {

                        $('#Dealer').html('');
                        $.each(res, function (i, item) {

                            $('#Dealer').append("<option value='" + item.dealerId + "'>" + item.dealerName + "</option>");
                        });
                    });
            });

            $('#SubBtn').click(function () {

                var name = $('#Name').val(),
                    phone = $('#Phone').val(),
                    carmodel = $('#CarModel').val(),
                    provinceId = $('#Province').val(),
                    cityId = $('#City').val(),
                    town = $('#Town').val(),
                    dealer = $('#Dealer').val(),
                    gender = $('input[name="gender"]:checked').val();

                if (phone.length != 11 || !reg(phone)) {
                    showToast("请输入正确手机号");
                    return false;
                }
                if (name.replace(/(^\s+)|(\s+$)/g, "").length == 0 || dealer == -1 || carmodel == -1 || provinceId == -1 || cityId == -1) {
                    showToast("输入信息不完整");
                    return false;
                }

                $.post('/Default/SaveForm?aid=' + aid, {
                    phone: phone, name: name, carmodel: carmodel,
                    provinceId: provinceId, cityId: cityId, town: town, gender: gender,
                    dealer: dealer, t: new Date().getTime()
                }, function (res) {

                    if (res.IsSucceed) {
                        $('#Name').val('');
                        $('#Phone').val('');
                        $('#CarModel').val('-1');
                        $('#Dealer').val('-1');
                    }
                    showToast(res.Message);

                    //$.ajax({
                    //    type: "POST",
                    //    dataType: "jsonp",
                    //    url: "http://www.changan.com.cn/api.php",
                    //    data: "op=try&aid=42&trail_channel_from=19001019&name=" + encodeURI(name) +
                    //        "&mobile=" + encodeURI(phone) +// "&carmodel=" + encodeURI(carmodel) +
                    //        "&dealer_brand=" + encodeURI(dealer),
                    //    success: function (data) {
                    //        alert(data);
                    //    }
                    //});
                });

            });
        });


        function showToast(str) {
            var toast = $('#toast');

            if (toast.css('display') != 'none') {
                return false;
            }

            toast.show();
            toast.find(".k-toast-info").text(str);

            setTimeout(function () {
                toast.hide();
            }, 1500);
        }
        function reg(val) {
            return /^[0-9]*$/.test(val);
        }
    </script>
</body>
</html>
